<template>
    <div>
        <el-form   class="demo-form-inline"  label-position="right">
            <el-form-item :label="item.name" v-for="item in data" :key="item.id" class="input100">
                <el-input v-model="item.value" v-if="item.type==0"  class="inputSuffix" :disabled="isDisabled" ></el-input>
                <el-select v-model="item.value" v-else-if="item.type==1" placeholder="请选择" class="inputSelect" :disabled="isDisabled">
                    <el-option :label="item.reference?item.reference:'是'" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                </el-select>
                <el-input placeholder="请输入内容" v-model="item.value" v-else-if="item.type==2" class="inputSuffix" :disabled="isDisabled">
                    <el-button slot="append">{{item.unit}}</el-button>
                </el-input>
                <div v-else-if="item.type==3">
                    <div class="cameraItem" :disabled="isDisabled">
                        <img v-if="item.value" :src="item.value" class="avatar" @click='showUpload'>
                        <i v-else class="iconfont iconpaizhao avatarIcon" @click='showUpload'></i>
                        <y-camera :action="actionUrl" :option="camera" :value="item.value" :itemId="item.id" @uploadSuccess="succeccHandle" @closeDialog="closeDialog"></y-camera>
                    </div>
                    <span class="viewImage" v-if="item.value" @click="viewImage(item.value)"><i class="el-icon-view"></i> 查看图片</span>
                </div>
                <div class="reference" v-if="item.remark">（备注：{{item.remark}}）</div>
            </el-form-item>
            <div style="text-align:center" v-if="footerIsShow">
                <el-button @click="submit" type="primary" v-if="!isDisabled"> 确 定</el-button>
                <el-button @click="changeDisabled" type="primary" v-else> 录 入</el-button>
            </div>
        </el-form>
         <el-dialog title="图片查看"  width="600" :visible.sync="isShow"  v-dialogDrag :append-to-body="true" :close-on-click-modal='false'>
            <div class="boxImge">
                <img :src="imageUrl" alt="">
            </div>
        </el-dialog>
    </div>
</template>
<script>
import baseHttp from '@/axios/baseHttp.js'
import YCamera from '@/components/common/camera.vue';
export default {
    components:{
        YCamera
    },
    props:{
        data:Array,
        isDisabled:{
            type:Boolean,
            default:false
        },
        footerIsShow:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return {
            actionUrl:baseHttp.idImgUpload(),
            uploadType:'',
            camera:{
                isShow:false,
                type:'camera'
            },
            isShow:false,
            imageUrl:''
        }
    },
    created(){
    },
    methods:{
        succeccHandle(data){
            let self= this;
            self.camera.isShow=data.isShow;
           self.data.forEach(el=>{
               if(el.id==data.itemId){
                   el.value=data.imageUrl
               }
           })
        },

        showUpload(){
            let self= this;
            if(!self.isDisabled){
                this.$confirm('选择图片上传方式', '提示', {
                    confirmButtonText: '拍照上传',
                    cancelButtonText: '普通上传',
                    distinguishCancelAndClose:true,
                    type: 'info'
                    }).then(() => {
                        self.camera.type='camera';
                        self.camera.isShow=true;
                    }).catch((action) => {
                        if(action === 'cancel'){
                            self.camera.type='file';
                            self.camera.isShow=true;
                        }
                    });
            }

        },
        submit(){
            let self = this;
            self.$emit('submitHanld',self.data);

        },
        changeDisabled(){
             let self = this;
            self.$emit('changeDisable',false);
        },
        closeDialog(){
            this.camera.isShow=false;
        },
        viewImage(imageUrl){
            let self = this;
            self.isShow = true;
            self.imageUrl =imageUrl;
        }
    }
}
</script>
<style scoped>
.cameraItem{
    width: 120px;
    height:120px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    text-align: center;
    display: inline-block;
}
.cameraItem[disabled]{
 cursor: not-allowed;
}
.avatarIcon{
    height:120px;
    width:120px;
    display: block;
    font-size:24px;
    line-height: 120px;
    color:#ccc;
}
.cameraItem .avatar{
    height:120px;
    width:120px;
    display: block;
    overflow: hidden;
}
.viewImage{
    color:#999;
    cursor: pointer;
    margin-left:8px
}
.viewImage:hover{
    color:#409EFF;
}
.boxImge{
    text-align: center;
}
.boxImge>img{
    height:600px;
}
</style>


